<template>
  <div class="content">
    <van-nav-bar class="header-top" title="站点详情" left-text="返回" left-arrow @click-left="onClickLeft" />
    <div class="title" style="margin-top: 44px;">{{ title }}</div>
    <div class="button-item">
      <div class="button-item-top">
        <div class="button-title device-status">
          <span style="margin-right: 10px;">设备状态:</span>
          <van-tag plain type="success">正常</van-tag>
          <van-tag plain type="warning">预警</van-tag>
          <van-tag plain type="danger">异常</van-tag>
          <van-tag plain type="default">未激活</van-tag>
        </div>
      </div>
      <div class="button-item-top">
        <div class="button-title">室分系统选择:</div>
        <van-button :type="primaryType === 0?'primary':'default'" @click="clickImg(0)">1#室分</van-button>
        <van-button :type="primaryType === 1?'primary':'default'" @click="clickImg(1)">2#室分</van-button>
        <van-button :type="primaryType === 2?'primary':'default'" @click="clickImg(2)">3#室分</van-button>
      </div>
      <div class="button-item-top add-top">
        <div style="margin-right: 10px;">设备类型:</div>
        <div  :class="`img-font ${active==1?'active':''}`" @click="showPop">
            <div  class="device-img"><img src="../../assets/dxq.png" /></div>
            <div>读卡器</div>
          </div>
      </div>
    </div>
    <div class="imgItem">
      <canvas-img 
        ref="canvas"
        id="siminst" 
        :floor="true" 
        :plus="true"
        :width="canvasWidth"
        :height="canvasHeight"
        :active="active"
        :activeImg="`../assets/dxq.png`"
        @openPoup="openPoup"
        @getPoint="getPoint"
        ></canvas-img>
    </div>
    <van-popup position="bottom" :style="{ height: '100%', background: 'rgba(0,0,0,0.3)' }" :overlay="false"
      v-model="showPopup">
      <div class="tips-bg">

        <van-form ref="form">
          <van-field label="站址名称:" :value="title" disabled>
            <!-- <template #select>
            </template> -->
          </van-field>
          
          <van-field label="站址编码:" v-model="form.stationCode" placeholder="请输入站址编码" />
          <van-field label="信源地址:" v-model="form.stationAddress" placeholder="请输入信源地址" />
          <van-field label="设备位置:" v-model="form.devicesAddress" placeholder="请输入设备位置" />
          <van-field label="设备SN:" v-model="form.devicesSn" placeholder="请输入设备SN" />
          <div class="img-item">
            <div style="font-size: 16px;padding:5px 15px">
              施工照片:
            </div>
          </div>
        </van-form>
        <div class="tips-header">
          <van-button size="small" type="default" style="margin:10px; width: 100px;" @click="onCancel"> 取消</van-button>
          <van-button type="danger" size="small" style="margin-right: 10px;width: 100px;"
            @click="onConfirm">确认</van-button>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
// import dxq  from '../../assets/dxq.png';
import canvasImg from '@/components/canvasImg'
import  testApi from '@/api/test.js'
export default {
  name: 'rfifDetail',
  components:{
    canvasImg
  },
  data() {
    return {
      active:'',
      PopupData: {
        title: '',
      },
      primaryType: 0,
      defaultType: 0,
      showPopup: false,
      option1: [
        { text: "1F", value: 1 },
        { text: "2F", value: 2 },
        { text: "3F", value: 3 },
        { text: "4F", value: 4 },
        { text: "5F", value: 5 }
      ],
      value1: 0,
      title: '',
      active: 0,
      value: '',
      scale:1,
      form:{},
      canvasWidth:0,
      canvasHeight:0,
    };
  },
  created() {
    this.title = this.$route.query.title
    // console.log(this.$route.query.title)
    this.canvasWidth = window.screen.width;
    this.canvasHeight = window.screen.height -310;
  },
  methods: {
    getPoint(){
      
    },
    openPoup(){
      this.showPopup=true;
    },
    showPop(){
      this.active = 1;
      this.$refs.canvas.active = 1;
    },
    clickImg(type) {
      this.primaryType = type;
    },
    onClickLeft() {
      this.$router.go(-1)
    },
    onSearch() {
    },
    onConfirm() {
      this.form = Object.assign({},this.form)
      testApi.addInstall(this.form).then(res=>{
        
      })
      this.showPopup = false
    },
    onCancel() {
      this.showPopup = false
    },
    zoomIn(){
        this.scale += 0.1;
      },
      zoomOut(){
        this.scale -= 0.1;
      }
  },
};
</script>

<style lang="less" scoped>
::v-deep .van-nav-bar__content {
  background-color: #fff;
  border-bottom: 1px #ccc solid;
}

::v-deep .van-nav-bar__title {
  color: #000;
}

::v-deep .van-nav-bar .van-icon {
  color: #02a7f0;
}

::v-deep .van-nav-bar__text {
  color: #02a7f0;
}

::v-deep .van-tab--active {
  color: #eb4b4b;
}

::v-deep .van-cell-group {
  margin: 13px 0;
}

::v-deep .van-cell__title {
  font-size: 18px;
  color: #000;
}

.item {
  font-size: 14px;
  display: flex;
  padding: 0 7%;
  height: 30px;
  justify-content: space-between;
}

.content {
  background-color: #fff;
  user-select: none;
  overflow: hidden;
}

.title {
  font-size: 18px;
  background-color: #fff;
  // height: 42px;
  margin: 5px 10px;
  line-height: 42px;
  padding: 0 10px;
  border-bottom: 1px #ccc solid;
}

.button-item {
  padding: 10px 0;
}

.button-item-top {
  display: flex;
  padding: 0 5px;
  font-size: 18px;
  height: 50px;
  justify-content: space-between;
}

.button-title {
  display: flex;
  line-height: 50px;
  font-size: 16px;
  align-items: center;
}

.tips-bg {
  background: #fff;
  height: 70%;
  position: absolute;
  bottom: 0;
  width: 100%;
}

.tips-header {
  text-align: center;
}

.img-item {
  display: flex;
  color: #000;
}

.imgItem {
  overflow: hidden;
}

.type-item {
  display: inline-block;
  width: 30px;
  height: 15px;
  line-height: 15px;
  background-color: #acfe2f;
  
}
.type-item-font{
  display: inline-block;
  font-size: 14px;
  height: 15px;
  line-height: 15px;
  margin: 0 5px;
}
.devices-btn-right{
    position: fixed;
    bottom: 20px;
    right: 20px;
    display: flex;
    flex-direction:column;
    box-shadow: 0 0 3px rgba(0,0,0,0.3);
    border-top: 1px solid  rgba(0,0,0,0.3);
    border-radius: 10px;
    overflow: hidden;
    button{
      border: 1px solid rgba(0,0,0,0.3);
      border-radius: 0;
      border-top: none;
      &:first-child{
        height: 30px;
      }
      &:last-child{
        height: 30px;
      }
    }
  }
  .device-status {
    display: flex;
    align-items: center;
    font-size: 16px;
    background-color: #fff;
    padding: 10px;
    span{
      margin-right: 10px;
    }
  }
  .add-top {
  background-color: #fff;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 10px;
}

  .img-font {
    text-align: center;
    font-size: 12px;
    padding: 3px 5px;
      width: 40px;
  }
  .device-img{
    img{
      height: 20px;
    }
  }
  .img-font.active{
    box-shadow: 0 0 3px #000;
    background: rgba(0,0,0,0.1);
  }
</style>